<template>
  <div class="service-wrap">
    <!-- 宫格布局 -->
    <van-grid :column-num="3" clickable>
      <van-grid-item
        v-for="(item, index) in list"
        :key="index"
        :text="item.title"
        :icon="item.img"
      />
    </van-grid>
    <!-- 宫格布局 -->
    <div class="service-phone">
      <div class="service">
        <div class="left">
          <img src="../../assets/image/line-custom.png" alt="" />
          <div class="msg-box">
            <div>在线客服</div>
            <div>人工客服在线解答您的疑惑</div>
          </div>
        </div>
        <i class="iconfont icon-right"></i>
      </div>
      <div class="phone">
        <div class="left">
          <img src="../../assets/image/custom-phone.png" alt="" />
          <div class="msg-box">
            <div>电话热线</div>
            <div>24小时服务热线为您服务 400-0515-507</div>
          </div>
        </div>
        <i class="iconfont icon-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "取还车辆",
          img: "https://static.wkzuche.com/H5/images/wechat/customerService/takealso-vehicle.png",
        },
        {
          title: "计费规则",
          img: "https://static.wkzuche.com/H5/images/wechat/customerService/accounting-rules.png",
        },
        {
          title: "费用明细",
          img: "https://static.wkzuche.com/H5/images/wechat/customerService/expense-detail.png",
        },
        {
          title: "注册会员",
        },
        {
          title: "认证审核",
        },
        {
          title: "订单支付",
        },
        {
          title: "订单修改",
        },
        {
          title: "预订车辆",
        },
        {
          title: "违章处理",
        },
        {
          title: "出险理赔",
        },
        {
          title: "退款说明",
        },
        {
          title: "其他问题",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.service-wrap {
  .service-phone {
    padding: 0 15px;
    margin-top: 15px;
    .service {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ebebeb;
      height: 85px;
      .left {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
          margin-right: 15px;
        }
        .msg-box {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          div:nth-child(1) {
            color: #464245;
            font-size: 17px;
          }
          div:nth-child(2) {
            color: #969696;
            font-size: 13px;
            margin-top: 15px;
          }
        }
      }
      .iconfont {
        font-size: 25px;
      }
    }
    .phone {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ebebeb;
      height: 85px;
      .left {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
          margin-right: 15px;
        }
        .msg-box {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          div:nth-child(1) {
            color: #464245;
            font-size: 17px;
          }
          div:nth-child(2) {
            color: #969696;
            font-size: 13px;
            margin-top: 15px;
          }
        }
      }
      .iconfont {
        font-size: 25px;
      }
    }
  }
}
</style>